<template>
	<view class="content">
		<view class="item">
			<view class="row">
				<view class="row">
					Diamond:
					<image class="image" src="../../static/image/index/zuanshi.png"></image>
					{{info.balance}}
				</view>
				<!-- <navigator url="/pages/cashOut/cashOut">
					<button type="primary" size="mini">Cash out</button>
				</navigator> -->
				<navigator url="/pages/cashOut/cashOut">
					<button type="primary" size="mini"
						v-if="info&&(info.giftcoin>chargeConf.withdrawMin||info.giftcoin==chargeConf.withdrawMin)">Cash
						out</button>
				</navigator>
			</view>
			<view>the recharged diamond cannot be withdraw</view>
		</view>
		<view class="iitem">
			<view class="ii" v-for="(item,index) in chargeConf.rechargeAmountConf" :key="index"
				:class="{active:active==index}" @click="selectItem(index,item)">
				<view class="iit">
					<image class="image" src="../../static/image/index/zuanshi.png"></image>
					{{item.exchangeAmount}}
				</view>
				<view class="iib">{{item.showTxt}}</view>
			</view>
		</view>
		<!-- <view class="ui">
			<view>支付方式</view>
			<view style="padding: 10px 0;">
				<u-radio-group v-model="form.payType">
					<u-radio :label="2" :name="2">
						<u-button type="primary" text="paypal"></u-button>
					</u-radio>
				</u-radio-group>
			</view>
		</view> -->
		<view v-html="html" class="html"></view>
		<!-- <u-button type="error" :text="$t('yuce.lijizhifu')" style="margin-top: 10px;" @click="recharge"></u-button> -->
	</view>
</template>
<script>
	var googlePay = uni.requireNativePlugin('sn-googlepay5');
	var FirebaseAnalytics = uni.requireNativePlugin('GT-GoogleFirebase_FirebaseAnalytics');
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'userToken']),
		},
		data() {
			return {
				isConnected: false, //是否支持支付
				active: 2,
				info: '',
				html: '',
				chargeConf: '', //充值配置
				form: {
					amount: 0, //充值金额
					payType: 2, //充值方式  1微信  2支付宝
				}
			}
		},
		onLoad() {
			//获取规则
			this.getPageContent()
			//获取用户信息
			this.getInfo()
			//获取充值配置
			this.getRechargeConf()
			// 初始化支付配置
			googlePay.init({}, (e) => {
				console.log('init', e);
				if (e.code == 0) {
					this.isConnected = true;
					// 初始化成功
				} else {
					// 初始化失败
					this.isConnected = false;
				}
			});

		},
		onNavigationBarButtonTap(op) {
			console.log(op);
			if (op.index == 0) {
				uni.navigateTo({
					url: '/pages/transactionDetails/transactionDetails',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		methods: {
			// 内购
			payInApp(row,tradeNo) {
				console.log(this.chargeConf.payTypes);
				if(this.chargeConf.payTypes&&this.chargeConf.payTypes.length>0){
					
				}else{
					console.log('暂无法支付');
					return
				}
				
				
				if (this.isConnected == false) {
					uni.showToast({
						title: 'Please init first to ensure successful service connection',//请先init，保证服务连接成功
						icon:"none"
					});
					return;
				}
				FirebaseAnalytics.logEvent(
				    {
				        eventName: 'pay_click',
				        eventParams: {
				            item_id: 'pay_click',
				            item_name: '支付点击',
				            content_type: 'image'
				        }
				    },
				    res => {
				        if (res.code == 200) {
				            console.log('logEvent success: ', res);
				        } else {
				            console.log('logEvent failed: ', res);
				        }
				    }
				);
				
				
				var pId = row.productId;
				// 步骤一：查询sku
				googlePay.querySku({
						inapp: [pId]
					},
					(e) => {
						if (e.code == 0) {
							console.log('querySku', e.list);
							if (e.list.length > 0) {
								var pd = e.list[0];
								// 步骤二：支付
								googlePay.payAll({
										productId: pId ,// 产品id
										accountId: tradeNo, // 用户Id，可选参数
									},
									(e) => {
										console.log('pay result', e);
										// 步骤三：确认订单
										googlePay.consume({
												purchaseToken: e.data[0].original.purchaseToken
											},
											(e) => {
												console.log('consume result', e);
											}
										);
										if (e.code == 0) {
										    // 支付成功，通知服务器
											let params = {
												originalJson:JSON.stringify(e.data[0].original),
												signature:e.data[0].signature
											}
											uni.$u.http.post(this.api.api_v1_order_googleNotify, params).then(res => {
												if (res.code == 200) {
													uni.showToast({
														title: 'Success',
														icon:"none"
													});
													//获取用户信息
													this.getInfo()
												}
											})
											
										} else {
											// 支付失败
											uni.setClipboardData({
												data: JSON.stringify(e),
												success: function () {
													uni.showToast({
														title: 'Payment failed',// 支付失败，已复制直接粘贴
														icon:"none"
													});
												}
											});
										}
										
									}
								);
							} else {
								uni.showToast({
									title: 'No product found',//未查询到产品
									icon:"none"
								});
							}
						} else {
							// 查询失败
							console.log('querySku fail', e);
							uni.setClipboardData({
								data: JSON.stringify(e),
								success: function () {
									uni.showToast({
										title: 'Query failed',// 查询失败，已复制错误码
										icon:"none"
									});
								}
							});
						}
					}
				);
			},
			//发起支付
			recharge() {
				let params = {
					...this.form
				}
				uni.$u.http.post(this.api.api_v1_order_recharge, params).then(res => {
					if (res.code == 200 && res.data) {
						// #ifdef H5
						window.location.href = res.data.targetUrl
						// #endif
					}
				})
			},
			selectItem(index, row) {
				this.active = index
				this.form.amount = parseInt(row.rechargeAmount)
				let params = {
					productId:row.productId
				}
				uni.$u.http.post(this.api.api_v1_order_googleRecharge, params).then(res => {
					if (res.code == 200 && res.data) {
						this.payInApp(row,res.data.tradeNo)
					}
				})
				

			},
			//获取充值配置
			getRechargeConf() {
				let params = {}
				uni.$u.http.get(this.api.api_v1_order_getRechargeConf, {
					params: params
				}).then(res => {
					if (res.code == 200 && res.data) {
						console.log('充值配置',res.data)
						this.chargeConf = res.data
						try {
							this.form.amount = parseInt(res.data.rechargeAmountConf[2].rechargeAmount)
						} catch (e) {
							//TODO handle the exception
						}

					}
				})
			},
			//获取用户信息
			getInfo() {
				let params = {}
				uni.$u.http.post(this.api.api_v1_user_getInfo, params).then(res => {
					if (res.code == 200 && res.data) {
						this.info = res.data
					}
				})
			},
			//获取规则
			getPageContent() {
				let params = {
					id: 5 //类型1.用户协议 2.隐私协议 3.关于我们 4.赛事推荐规则 5.充值提示说明 6.提现提示说明 7.转盘抽奖说明
				}
				uni.$u.http.get(this.api.api_v1_getPageContent, {
					params: params
				}).then(res => {
					if (res.code == 200 && res.data) {
						this.html = res.data.content
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 5px 10px;
		box-sizing: border-box;
		color: #fff;
		font-size: 13px;

		.item {
			width: 100%;
			background-color: #242448;
			padding: 10px;
			box-sizing: border-box;
			border-radius: 5px;
			display: flex;
			margin-top: 10px;
			flex-direction: column;
			margin-bottom: 10px;
			line-height: 28px;
			flex-wrap: wrap;

			.row {
				display: flex;
				align-items: center;
				font-size: 20px;
				flex: 1;

				.image {
					width: 30px;
					height: 30px;
					margin: 0 5px;
				}
			}


		}

		.iitem {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			border-radius: 5px;
			display: flex;
			line-height: 28px;
			flex-wrap: wrap;
			justify-content: space-around;

			.ii {
				width: 300rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #242448;
				border-radius: 5px;
				font-size: 14px;
				margin-bottom: 10px;
				overflow: hidden;

				.iit {
					background-color: #F2F2F2;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 50px;
					color: #343434;
					font-weight: bold;
					font-size: 20px;

					.image {
						width: 30px;
						height: 30px;
						margin-right: 5px;
					}
				}

				.iib {
					height: 30px;
					background: #EC808D;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.active {
				background-color: #c72d5e;
			}
		}

		.ui {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			border-radius: 5px;
		}

		.html {
			width: 100%;
			background-color: #242448;
			color: #fff;
			padding: 10px;
			box-sizing: border-box;
		}
	}
</style>